<!-- 商品选择弹窗 -->
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">选择商品</h4>
</div>
<div class="modal-body">
    <div class="panel panel-default panel-intro">
        <div class="panel-body">
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade active in" id="one">
                    <div class="widget-body no-padding">
                        <div id="toolbar" class="toolbar">
                            <a href="javascript:;" class="btn btn-primary btn-refresh" title="刷新">
                                <i class="fa fa-refresh"></i> 刷新
                            </a>
                        </div>
                        <table id="table" class="table table-striped table-bordered table-hover table-nowrap" 
                               data-operate-edit="false" 
                               data-operate-del="false"
                               width="100%">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
    <button type="button" class="btn btn-success btn-embossed" id="btn-select-confirm">确定选择</button>
</div>

<script>
$(function () {
    var table = $("#table");
    
    // 初始化表格
    table.bootstrapTable({
        url: '{:url("market/select")}',
        pk: 'id',
        sortName: 'id',
        columns: [
            [
                {checkbox: true},
                {field: 'id', title: 'ID', width: 80},
                {field: 'name', title: '商品名称', align: 'left'},
                {field: 'price', title: '商品价格', operate: 'BETWEEN'},
                {field: 'stock', title: '库存', width: 80},
                {field: 'main_image', title: '商品图片', events: Table.api.events.image, formatter: Table.api.formatter.image, operate: false}
            ]
        ]
    });
    
    // 刷新按钮
    $(document).on('click', '.btn-refresh', function () {
        table.bootstrapTable('refresh');
    });
    
    // 确定选择按钮
    $(document).on('click', '#btn-select-confirm', function () {
        var rows = table.bootstrapTable('getSelections');
        if (rows.length === 0) {
            Toastr.warning('请选择商品');
            return;
        }
        
        // 触发自定义事件，传递选中的商品数据
        $(document).trigger('product.selected', [rows]);
        
        // 关闭弹窗
        $('.modal').modal('hide');
    });
});
</script>